<template>
    <div>
        <a-row>
            <a-col span="15">
                <a-form>
                    <a-row>
                        <a-form-item>
                            <a-col span="5" offset="1">
                                <a-form-item label="通用预存款充值设置" :labelCol="formLabel.left" style="float:left;"/>
                            </a-col>
                            <a-col span="17" offset="1">
                                <a-form-item :labelCol="formLabel.right" :extra="message" style="float:left;">
                                    <a-radio-group :options="radioOptions" v-model="selectRadio" @change="radioChange"/>
                                </a-form-item>
                            </a-col>
                            <a-col span="5" offset="1">
                                <a-form-item label="专用预存款分类管理" :labelCol="formLabel.left" style="float:left;"/>
                            </a-col>
                            <a-col span="17" offset="1">
                                <a-form-item :labelCol="formLabel.right" style="float:left;">
                                    <a-radio-group :options="radioOptions1" v-model="selectRadio" @change="radioChange"/>
                                </a-form-item>
                            </a-col>
                        </a-form-item>
                        <a-form-item v-if="selectRadio=='2'">
                            <a-row>
                                <a-col span="5" offset="1">
                                    <a-form-item label="预存款套餐" :labelCol="formLabel.left" style="float:left;"/>
                                </a-col>
                                <a-col span="17" offset="1">
                                    <a-form-item :labelCol="formLabel.right" style="float:left;">
                                        <a-table v-if="data" bordered :columns="columns" :dataSource="data" :scroll="{ x: 475, y: 300 }" :pagination="false">
                                            <a slot="action" slot-scope="text,dep" href="javascript:;">
                                            <a-dropdown :trigger="['click']">
                                                <a class="ant-dropdown-link" href="#">
                                                操作 <a-icon type="down" />
                                                </a>
                                                <a-menu slot="overlay">
                                                <a-menu-item key="0">
                                                    <a href="javascript:void(0)" @click="delDep(dep.id)">删除</a>
                                                </a-menu-item>
                                                </a-menu>
                                            </a-dropdown>
                                            </a>
                                        </a-table>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row>
                                <a-form-item>
                                    <a-col span="17" offset="7">
                                        <a-button id="print_true" type="dashed" :disabled="false" @click="add_dep" block>+预存款套餐</a-button>
                                        <a-modal title="添加预存款" :visible="print_lop" :width="600" @ok="ok_dep" @cancel="cancel_dep">
                                            <a-row>
                                                <a-col span="15">
                                                    <a-form :form="form" @submit="save">
                                                        <a-form-item label="预存款充值金额：" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
                                                            <a-input v-decorator="[
                                                                'price',
                                                                {rules: [{ required: true, message: '请填写预存款充值金额' }]}
                                                            ]" placeholder="请输入预存款充值金额"/>
                                                        </a-form-item>
                                                        <a-form-item label="实际支付金额：" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
                                                            <a-input v-decorator="[
                                                                'money',
                                                                {rules: [{ required: true, message: '请填写实际支付金额' }]}
                                                            ]" placeholder="请输入实际支付金额"/>
                                                        </a-form-item>
                                                    </a-form>
                                                </a-col>
                                            </a-row>
                                        </a-modal>
                                    </a-col>
                                </a-form-item>
                            </a-row>
                        </a-form-item>
                        <a-form-item v-if="selectRadio=='4'">
                            <a-row>
                                <a-col span="5" offset="1">
                                    <a-form-item label="预存款类别" :labelCol="formLabel.left" style="float:left;"/>
                                </a-col>
                                <a-col span="17" offset="1">
                                    <a-form-item :labelCol="formLabel.right" style="float:left;">
                                        <a-table v-if="data1" bordered :columns="columns1" :dataSource="data1" :scroll="{ x: 475, y: 300 }" :pagination="false">
                                            <a slot="action" slot-scope="text,dep" href="javascript:;">
                                                <a-dropdown :trigger="['click']">
                                                    <a class="ant-dropdown-link" href="#">
                                                        操作 <a-icon type="down" />
                                                    </a>
                                                    <a-menu slot="overlay">
                                                        <a-menu-item key="0">
                                                            <a href="javascript:void(0)" @click="delZy(dep.id)">删除</a>
                                                        </a-menu-item>
                                                    </a-menu>
                                                </a-dropdown>
                                            </a>
                                        </a-table>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row>
                                <a-form-item>
                                    <a-col span="17" offset="7">
                                        <a-button id="print_true1" type="dashed" :disabled="false" @click="add_dep1" block>+专用预存款</a-button>
                                        <a-modal title="添加专用预存款" :visible="print_lop1" :width="600" @ok="ok_dep1" @cancel="cancel_dep1">
                                            <a-row>
                                                <a-col span="15">
                                                    <a-form :form="form" @submit="save1">
                                                        <a-form-item label="专用预存款名称：" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
                                                            <a-input v-decorator="[
                                                                'zy_name',
                                                                {rules: [{ required: true, message: '请填写专用预存款名称' }]}
                                                            ]" placeholder="请输入专用预存款名称"/>
                                                        </a-form-item>
                                                    </a-form>
                                                </a-col>
                                            </a-row>
                                        </a-modal>
                                    </a-col>
                                </a-form-item>
                            </a-row>
                        </a-form-item>
                        <a-form-item else>
                            <a-col offset="7" span="24">
                                <a-button v-if="selectRadio=='4'" type="primary" @click="save1">保存</a-button>
                                <a-button v-else type="primary" @click="save">保存</a-button>
                                <a-button style="margin-left: 16px">返回</a-button>
                            </a-col>
                        </a-form-item>
                    </a-row>
                </a-form>
            </a-col>
        </a-row>
    </div>
</template>

<script>
import { getDesList, saveDep, delDep,delZy,saveZy,getZy} from '@/api/cashier'
import { mapGetters } from 'vuex'
const radioOptions = [
    {label: '自由充值', value: '1'},
    {label: '自定义套餐', value: '2'},
    {label: '关闭充值', value: '3'},
]
const radioOptions1 = [
    {label: '专用预存款', value: '4'},
]
const formLabel = {
    left: {span: 23, offset: 0},
    right: {span: 8, offset: 0}
}
const columns = [
  { title: '预存款充值金额', width: 100, dataIndex: 'price', key: 'price'},
  { title: '实际支付金额', width: 100, dataIndex: 'money', key: 'money' },
  {
    title: '操作',
    key: 'operation',
    width: 100,
    scopedSlots: { customRender: 'action' },
  },
];
const columns1 = [
    { title: '预存款名称', width: 100, dataIndex: 'zy_name', key: 'zy_name'},
    {
        title: '操作',
        key: 'operation',
        width: 100,
        scopedSlots: { customRender: 'action' },
    },
];
const textList = {free: '住户可以在微信公众号中自由选择预存款充值金额',diy: '预先设置预存款充值优惠套餐，住户只能选择所设置套餐金额进行充值', close: '住户在微信公众号无法进行预存款充值'}
export default {
    name: 'charge_pre_deposit_depositSet',
    data() {
        return {
            radioOptions,
            radioOptions1,
            formLabel,
            message: textList.diy,
            selectRadio: '1',
            columns,
            columns1,
            data: [],
            data1: [],
            zy_name:'',
            show_data:false,
            print_lop: false,
            print_lop1: false,
            form: this.$form.createForm(this),
            new_pet:[]
        }
    },
    mounted() {
        this.getList();
        this.getZy()
    },
    methods: {
        ...mapGetters(['token', 'pmsArId', 'nowMg']),
        radioChange(e) {
            this.selectRadio = e.target.value
            this.message = textList[e.target.value]
        },
        getList() {
            getDesList({token:this.token()})
                .then(res => {
                    if (res.data.data.length > 0) {
                        this.data = res.data.data;
                    } else {
                        this.show_data = true;
                        this.data = [];
                    }
                    this.selectRadio = res.data.set.toString();
                })
                .catch(err => {
                    console.log(err)
                })
        },
        getZy() {
            getZy({token:this.token()})
                .then(res => {
                    if (res.data.data.length > 0) {
                        this.data1 = res.data.data;
                    } else {
                        this.data1 = [];
                    }
                })
                .catch(err => {
                    console.log(err)
                })
        },
        add_dep(){
            this.print_lop = true;
        },
        add_dep1(){
            this.print_lop1 = true;
        },
        cancel_dep() {
            this.print_lop = false;
        },
        cancel_dep1() {
            this.print_lop1 = false;
        },
        ok_dep() {
            this.form.validateFields((err, values) => {
                this.data.push(values)
            })
            this.print_lop = false;
        },
        ok_dep1() {
            this.form.validateFields((err, values) => {
                this.data1.push(values)
            })
            this.print_lop1 = false;
        },
        save() {
            saveDep(Object.assign({dep:this.data},{sta:this.selectRadio},{token:this.token()})).then(res => {
                if(res.code == 0) {
                    this.$notification.success({
                        message: '成功',
                        description: res.msg
                    })
                    setTimeout(() => {
                        this.$router.push({name: 'charge_pre_deposit_index'})
                    }, 1000)
                } else {
                    this.$notification['error']({
                        message: '错误',
                        description: res.msg,
                        duration: 4
                    })
                }

            }).catch(err => {
                this.$notification['error']({
                    message: '错误',
                    description: ((err.response || {}).data || {}).message || err || '请求出现错误，请稍后再试',
                    duration: 4
                })
            })
        },
        save1() {
            saveZy(Object.assign({dt:this.data1},{token:this.token()})).then(res => {
                if(res.code == 0) {
                    this.$notification.success({
                        message: '成功',
                        description: res.msg
                    })
                    setTimeout(() => {
                        this.$router.push({name: 'charge_pre_deposit_index'})
                    }, 1000)
                } else {
                    this.$notification['error']({
                        message: '错误',
                        description: res.msg,
                        duration: 4
                    })
                }

            }).catch(err => {
                this.$notification['error']({
                    message: '错误',
                    description: ((err.response || {}).data || {}).message || err || '请求出现错误，请稍后再试',
                    duration: 4
                })
            })
        },
        delDep(v){
            delDep(Object.assign({id:v},{token:this.token()})).then(res => {
                if(res.code == 0) {
                    this.$notification.success({
                        message: '成功',
                        description: res.msg
                    });
                    setTimeout(() => {
                        this.getList()
                    }, 1000)
                } else {
                    this.$notification['error']({
                        message: '错误',
                        description: res.msg,
                        duration: 4
                    })
                }

            }).catch(err => {
                this.$notification['error']({
                    message: '错误',
                    description: ((err.response || {}).data || {}).message || err || '请求出现错误，请稍后再试',
                    duration: 4
                })
            })
        },
        delZy(v){
            delZy(Object.assign({id:v},{token:this.token()})).then(res => {
                if(res.code == 0) {
                    this.$notification.success({
                        message: '成功',
                        description: res.msg
                    });
                    setTimeout(() => {
                        this.getZy()
                    }, 1000)
                } else {
                    this.$notification['error']({
                        message: '错误',
                        description: res.msg,
                        duration: 4
                    })
                }

            }).catch(err => {
                this.$notification['error']({
                    message: '错误',
                    description: ((err.response || {}).data || {}).message || err || '请求出现错误，请稍后再试',
                    duration: 4
                })
            })
        }
    }
}
</script>

<style scoped>
    .ant-form-item {
        margin-bottom: 10px;
    }
</style>